<script setup lang="ts">
import * as echarts from 'echarts'
import {onMounted, ref} from 'vue'
import {ECharts, EChartsOption} from "echarts";
import {getProvinceStatisticsApi} from "@/api/chartApis.ts";

const concentrationExceedPM = ref()
const concentrationExceedCO = ref()
const concentrationExceedSO2 = ref()

/**
 * 异步初始化图表数据。
 * @param chartDom1 ECharts实例容器，用于展示悬浮颗粒物(PM2.5)浓度超标累计图表。
 * @param chartDom2 ECharts实例容器，用于展示二氧化硫(SO2)浓度超标累计图表。
 * @param chartDom3 ECharts实例容器，用于展示一氧化碳(CO)浓度超标累计图表。
 * @returns {void}
 */
const initData = async (chartDom1: any, chartDom2: any, chartDom3: any) => {
  let res = await getProvinceStatisticsApi()
  let xData1: Array<string> = []
  let xData2: Array<string> = []
  let xData3: Array<string> = []
  let yData1: Array<number> = []
  let yData2: Array<number> = []
  let yData3: Array<number> = []
  if (res?.data.code == 200){
    let particulateData = JSON.parse(JSON.stringify(res.data.data))
    let sulfurData = JSON.parse(JSON.stringify(res.data.data))
    let carbonData = JSON.parse(JSON.stringify(res.data.data))
    //按照particulateExceedNum先排序
    particulateData.sort((a: any, b: any) => {
      return b.particulateExceedNum - a.particulateExceedNum
    })
    //按照sulfurExceedNum排序
    sulfurData.sort((a: any, b: any) => {
      return b.sulfurExceedNum - a.sulfurExceedNum
    })
    //按照carbonExceedNum排序
    carbonData.sort((a: any, b: any) => {
      return b.carbonExceedNum - a.carbonExceedNum
    })
    for (let i = 0; i < 12; i++){
      xData1.push(particulateData[i].provinceShort)
      xData2.push(sulfurData[i].provinceShort)
      xData3.push(carbonData[i].provinceShort)
      yData1.push(particulateData[i].particulateExceedNum)
      yData2.push(sulfurData[i].sulfurExceedNum)
      yData3.push(carbonData[i].carbonExceedNum)
    }
  }
  let optionPM: EChartsOption;
//条形图，横坐标为省简称，标题为PM2.5浓度超标累计
  optionPM = {
    title: {
      text: '悬浮颗粒物(PM2.5)浓度超标累计',
      left: 'center',
      textStyle: {
        color: '#ffffff', // 这里设置标题的字体颜色
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xData1,
      axisLabel: {
        color: '#ffffff', // 这里设置x轴标签的字体颜色
        fontSize: 10,
        interval: 0,
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff', // 这里设置y轴标签的字体颜色
        fontSize: 10
      }
    },
    series: [
      {
        data: yData1,
        type: 'bar',
        barWidth: 16, // 这里设置柱状图的宽度
        itemStyle: {
          color: '#1059ce' // 这里设置条的颜色
        }
      }
    ]
  };

  let optionSO2: EChartsOption;
//条形图，横坐标为省简称，标题为二氧化硫(SO2)浓度超标累计
  optionSO2 = {
    title: {
      text: '二氧化硫(SO2)浓度超标累计',
      left: 'center',
      textStyle: {
        color: '#ffffff', // 这里设置标题的字体颜色
        fontSize: 12,

      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xData2,
      axisLabel: {
        color: '#ffffff', // 这里设置x轴标签的字体颜色
        fontSize: 10,
        interval: 0, // 这里设置横坐标标签的显示间隔，0表示都显示
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff', // 这里设置y轴标签的字体颜色
        fontSize: 10
      }
    },
    series: [
      {
        data: yData2,
        type: 'bar',
        barWidth: 16, // 这里设置柱状图的宽度
        itemStyle: {
          color: '#4CCE10FF' // 这里设置条的颜色
        }
      }
    ]
  };

  let optionCO: EChartsOption;
//条形图，横坐标为省简称，标题为一氧化碳(CO)浓度超标累计
  optionCO = {
    title: {
      text: '一氧化碳(CO)浓度超标累计',
      left: 'center',
      textStyle: {
        color: '#ffffff', // 这里设置标题的字体颜色
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xData3,
      axisLabel: {
        color: '#ffffff', // 这里设置x轴标签的字体颜色
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff', // 这里设置y轴标签的字体颜色
        fontSize: 10
      }
    },
    series: [
      {
        data: yData3,
        type: 'bar',
        barWidth: 16, // 这里设置柱状图的宽度
        itemStyle: {
          color: '#ff6600' // 这里设置条的颜色
        }
      }
    ]
  };
  chartDom1.setOption(optionPM)
  chartDom2.setOption(optionSO2)
  chartDom3.setOption(optionCO)
}



onMounted(()=>{
  let chartDomPM = echarts.init(concentrationExceedPM.value)
  let chartDomSO2 = echarts.init(concentrationExceedSO2.value)
  let chartDomCO = echarts.init(concentrationExceedCO.value)
  initData(chartDomPM, chartDomSO2, chartDomCO)
})
</script>

<template>
<div class="w-full h-full flex flex-col items-center justify-center">
  <div class="w-full h-1/3" ref="concentrationExceedPM">

  </div>
  <div class="w-full h-1/3" ref="concentrationExceedSO2">

  </div>
  <div class="w-full h-1/3" ref="concentrationExceedCO">

  </div>
</div>
</template>

<style scoped>

</style>
